<template>
  <view class="index">
    <view class="notice-block" v-if="total">
      <van-button type="info" color="#333" size="small" @tap="toNoticeList">
        {{ total }}条消息
      </van-button>
    </view>
    <van-tabs
      @click="onClick"
      color="#006CFF"
      title-active-color="#006CFF"
      sticky="true"
    >
      <view class="height"></view>
      <van-tab title="推荐">
        <List
          ref="recommend"
          :type="1"
          @reply="handleReply"
          @report="handleReport"
        />
      </van-tab>
      <van-tab title="关注">
        <List
          ref="focus"
          :type="2"
          @reply="handleReply"
          @report="handleReport"
          v-if="type === 2"
        />
      </van-tab>
    </van-tabs>
    <view class="bottom-btn">
      <view class="button bottom-fl" @tap="tomMyCricle">
        前往我的车商圈
      </view>
      <view class="button bottom-fr" @tap="publish">
        发布车商圈
      </view>
    </view>
    <view
      v-show="inputShow"
      class="comment-input"
      :style="`bottom: ${inputBottom}px`"
      :animation="animationData"
    >
      <van-field
        type="textarea"
        :autosize="{ maxHeight: 100, minHeight: 50 }"
        :value="commentContent"
        @focus="handleFocus"
        @blur="handleBlur"
        @confirm="submitComment"
        @input="handerInputChange"
        :placeholder="placeholder"
        :adjust-position="true"
        :focus="focus"
        confirm-type="send"
      />
    </view>
    <van-action-sheet
      :show="reportShow"
      :actions="actions"
      @cancel="reportShow = false"
      @select="submitReport"
      cancel-text="取消"
    />
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import List from '@components/circle/index/list'
import {
  getCircleList,
  getTotal,
  publishComment,
  report
} from '@requests/circle'
import { navigateTo, toast, toLogin } from '@utils/index'

const animation = Taro.createAnimation({
  duration: 500,
  timingFunction: 'ease'
})

export default {
  name: 'FindCars',
  components: {
    List
  },
  data() {
    return {
      actions: [{ name: '举报', color: '#006CFF' }],
      type: 1,
      total: 0,
      noticeNum: 100,
      show: false,
      reportCircle: null,
      reportShow: false,
      focus: false,
      inputShow: false,
      inputBottom: 0,
      animationData: null,
      commentContent: '',
      replyCircle: null,
      placeholder: '回复:'
    }
  },
  onShow() {
    if (this.$store.state.user.token) {
      this.getTotal()
      this.getRef().getList(0)
    }
  },
  onShareAppMessage() {
    return {
      title: '亿车商二手车海量真实车源信息对接'
    }
  },
  methods: {
    getTotal() {
      getTotal().then(res => {
        this.total = res.result.total
      })
    },
    toNoticeList() {
      navigateTo('circle/notice')
    },
    tomMyCricle() {
      if (!this.$store.state.user.token) {
        toLogin()
        return
      }
      navigateTo('circle/person', {
        id: this.$store.state.user.userInfo.user_id
      })
    },
    onClick(e) {
      this.type = e.detail.index + 1
    },
    handleReport(circle) {
      this.reportCircle = circle
      this.reportShow = true
    },
    handleReply(replyCircle) {
      if (!this.$store.state.user.token) {
        toLogin()
        return
      }
      this.replyCircle = replyCircle
      this.placeholder =
        !replyCircle.reply_user_id ||
        replyCircle.reply_user_id === this.$store.state.user.userInfo.user_id
          ? '回复:'
          : `回复${replyCircle.reply_user_name}:`
      this.handleFocus()
    },
    submitReport() {
      report(this.reportCircle.content_id).then(res => {
        this.reportShow = false
        toast.info('已收到您的举报，工作人员将立即核实')
      })
    },
    publish() {
      if (!this.$store.state.user.token) {
        toLogin()
        return
      }
      navigateTo('circle/publish')
    },
    handleFocus(e) {
      animation.translateY(0).step() //注意动画移动到0，可能是因为键盘弹起改变了body的位置
      this.inputShow = true
      this.focus = true
    },
    handleBlur(e) {
      this.inputBottom = 0
      this.inputShow = false
      this.focus = false
      animation.translateY(0).step()
      this.animationData = animation.export()
    },
    handerInputChange(e) {
      this.commentContent = e.detail
    },
    getRef() {
      return this.type === 1 ? this.$refs.recommend : this.$refs.focus
    },
    submitComment() {
      if (!this.commentContent) {
        toast.info('评论不能为空')
        return
      }
      publishComment({
        content_id: this.replyCircle.content_id,
        to_user_id:
          !this.replyCircle.reply_user_id ||
          this.replyCircle.reply_user_id ===
            this.$store.state.user.userInfo.user_id
            ? 0
            : this.replyCircle.reply_user_id,
        content: this.commentContent
      }).then(res => {
        this.commentContent = ''
        this.handleBlur()
        this.getRef().refresh(this.replyCircle.index)
      })
    }
  }
}
</script>

<style>
page {
  height: 100%;
}
.index {
  background: #f9f9f9;
  -webkit-overflow-scrolling: touch;
}
.notice-block {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #f9f9f9;
  text-align: center;
}
.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.625rem 0.8rem;
  background: #fff;
  z-index: 99;
}
.bottom-btn .button {
  height: 86rpx;
  line-height: 86rpx;
  border-radius: 12rpx;
  background-color: #fff;
  border: 2px solid #006cff;
  color: #006cff;
  font-size: 1.02rem;
  text-align: center;
  display: inline-block;
  width: 45%;
}
.bottom-btn .bottom-fl {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #000;
}
.bottom-btn .bottom-fr {
  margin-left: 7%;
}
.comment-input {
  position: fixed;
  left: 0;
  right: 0;
  background: #f9f9f9;
  padding: 24rpx;
  z-index: 1000;
}
</style>
